import React from 'react';
import { Modal, Button } from 'antd';
import './submit.scss';

const Seconds = 15;
class SubmitReport extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      remainSecond: Seconds,
    };
    this.startCount = ::this.startCount;
    this.count = ::this.count;
  }
  startCount() {
    this.setState({
      remainSecond: Seconds,
    }, () => {
      this.timer = setInterval(this.count, 1000);
    });
  }
  count() {
    const remainSecond = this.state.remainSecond - 1;
    if (remainSecond < 0) {
      clearInterval(this.timer);
      this.setState({ visible: false });
    } else {
      this.setState(preState => (Object.assign({}, preState, {
        remainSecond,
      })));
    }
  }
  showModal() {
    this.setState({
      visible: true
    }, () => {
      this.startCount();
    });
  }
  onCancel() {
    const { onReturn } = this.props;
    clearInterval(this.timer);
    this.timer = undefined;
    this.setState({
      visible: false,
    }, () => { onReturn(); });
  }
  render() {
    return (
      <Modal
        title="提交成功"
        visible={this.state.visible}
        className="submit-modal-page"
        footer={null}
        maskClosable={false}
      >
        <div className="modal-smile-wrap">
          <img src="images/interactive/icon_smile.png" alt="笑脸" className="smile" />
        </div>
        <div className="modal-result">
          非常感谢您提出的宝贵意见！
        </div>
        <div className="modal-autoreturn">
          {this.state.remainSecond}秒后自动返回！
        </div>
        <div className="modal-footer">
          <Button className="modal-okbtn" onClick={this.onCancel.bind(this)}>
            确定
          </Button>
        </div>
      </Modal>
    );
  }
}

export default SubmitReport;
